<template>
	<view>
		<view class="dingpei">
			<view>
				长跑路线
				<view style="border-bottom:  6rpx solid #002FAF;width: 35rpx;margin: 7rpx auto;" />
			</view>
			<view @click="shouye()">
				货源大厅
			</view>
			<view @click="zhuanshu()">
				专属货源
			</view>
		</view>
		<view class="wai">
			<h2 class="cpao">常跑路线({{xx.length}}/10)</h2>
			<view class="xun" v-for="tt in xx">
				<view class="dd">{{tt.startposition}}</view>
				<view class="xiang"></view>
				<view class="dd1">{{tt.stopposition}}</view>
				<view style="margin: auto;" @click="shanchu(tt.id)">
					<image src="@/photo/zhaohuo/删除 (1).png" mode="" style="width: 40rpx;height: 40rpx;"></image>
				</view>
			</view>
			<view class="ze">
				<input class="dd" type="text" v-model="shifa" placeholder="填写始发地"
					style="text-align: center;height: 60rpx;font-size: 32rpx;" />
				<view class="xiang">

				</view>
				<input class="zuo" type="text" v-model="mudidi" placeholder="填写目的地"
					style="text-align: center;height: 60rpx;font-size: 32rpx;" />
			</view>
			<button class="tianjia" @click="tianjiaa()">添加</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		userStore
	} from '@/stores/user';
	import {
		http
	} from '../../config/requst';
	const user = userStore()
	const xx = (ref([]))
	const shouye = () => {
		uni.switchTab({
			url: '/pages/Search/Search'
		})
	}
	const zhuanshu = () => {
		uni.redirectTo({
			url: '/pages/admin/admin'
		})
	}
	// 查找该用户的常跑路线
	const lol = async (id) => {

		console.log(id)
		const cpaol = await http({
			url: "/freightsources/cangpao/" + id,
			method: 'GET'
		})
		console.log(cpaol)
		if (cpaol.code == 20041) {
			xx.value = cpaol.shuju
		}
	}
	//将查找回来的常跑路线挂载到页面上
	onMounted(() => {
		lol(user.user.id)
	})

	const shanchu = (id) => {

		wx.showModal({
			title: '删除',
			content: '确定要删除吗？',
			success: function(sm) {
				if (sm.confirm) {
					// 用户点击了确定 可以调用删除方法了
					dele(id)
				} else if (sm.cancel) {
					console.log('用户点击取消')
				}
			}
		})

	}
	const dele = async (id) => {
		const del = await http({
			url: "/freightsources/del/" + id,
			method: 'GET'
		})
		lol(user.user.id)
		if (del.code == 20021) {
			wx.showToast({
				title: '删除成功',
				icon: 'success',
				duration: 2000 //持续的时间
			})
		} else {
			wx.showToast({
				title: '删除失败！请稍后重试',
				icon: 'none',
				duration: 2000 //持续的时间
			})
		}
		console.log(del)
	}
	
	const shifa = ref()
	const mudidi = ref()
	const tianjiaa = () => {
		console.log(111)

		if (shifa.value != null && mudidi.value != null) {
			console.log(shifa.value)
			console.log(mudidi.value)
			const cap = ({
				did: user.user.id,
				startposition: shifa.value,
				stopposition: mudidi.value
			})
			lola(cap)
		} else {
			console.log(777)
		}
	}

	const lola = async (cc) => {
		console.log(cc)
		const lolb = await http({
			url: '/freightsources/cpao',
			method: 'POST',
			data: cc
		})
		lol(user.user.id)
		shifa.value = ''
		mudidi.value = ''
		console.log(123)
		console.log(lolb)
		if (lolb.code == 20021) {
			console.log(1234)
			wx.showToast({
				title: lolb.msg,
				icon: 'success',
				duration: 2000 //持续的时间
			})
		} else if (lolb.code == 20020) {
			wx.showToast({
				title: lolb.msg,
				icon: 'none',
				duration: 2000 //持续的时间
			})
		}
	}
</script>

<style scoped>
	.wai {
		margin-top: 40rpx;
	}

	.cpao {
		/* border: 1px solid #000; */
		padding-left: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 36rpx;
		font-weight: 900;
	}

	.xun {
		display: flex;
		font-size: 32rpx;
		font-weight: 549;
		border-bottom: 1px solid #F8F8F8;
	}

	.dd {
		/* border: 1px solid #000; */
		width: 300rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
	}

	.dd1 {
		/* border: 1px solid #000; */
		width: 300rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
	}

	.ze {
		display: flex;
	}

	.xiang {
		width: 90rpx;
		background-image: url('/photo/zhaohuo/右.png');
		background-repeat: no-repeat;
		background-position: 29rpx 16rpx;
	}

	.dingpei {
		display: flex;
		justify-content: space-around;
		color: #002FAF;
	}

	.tianjia {
		width: 500rpx;
		margin-top: 30rpx;
		color: #F8F8F8;
		background-color: #22B14C;
	}

	.custom-toast {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding: 15px 20px;
		background-color: #333;
		color: #fff;
		border-radius: 4px;
		z-index: 9999;
	}

	.custom-toast.error {
		background-color: #e74c3c;
		/* 红色背景表示错误 */
	}
</style>